<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script>
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

export default {
  name: 'LineChartComponent',
  props: {
    xData: {
      type: Array,
      required: true
    },
    yData: {
      type: Array,
      required: true
    },
    name: {
      type: String,
      default: '数据'
    },
    color: {
      type: String,
      default: '#409EFF'
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
    window.removeEventListener('resize', this.resizeChart);
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      this.updateChart();
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    updateChart() {
      if (!this.chart) return;
      
      const option = {
        color: [this.color],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.xData,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0.05)'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666'
          }
        },
        series: [
          {
            name: this.name,
            type: 'line',
            data: this.yData,
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              borderWidth: 2
            },
            lineStyle: {
              width: 3
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: this.color + 'AA' // 透明度为0.67
                },
                {
                  offset: 1,
                  color: this.color + '11' // 透明度为0.07
                }
              ])
            }
          }
        ]
      };
      
      this.chart.setOption(option);
    }
  },
  watch: {
    xData() {
      this.updateChart();
    },
    yData() {
      this.updateChart();
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 300px;
}
</style> 